import _ from "lodash";
import React from "react";
import {viewTypes} from "../../../../../constants/form";
import './View.less';
import {Consumer} from "../../theme";

const { PC, MOBILE, MOBILE_WX, READONLY } = viewTypes;

export default class View extends React.Component {
  constructor() {
    super();

    this.handleValueChange = this.handleValueChange.bind(this);
    this.handleValueChangeForNE = this.handleValueChangeForNE.bind(this);
    this.toggleFooterDisable = this.toggleFooterDisable.bind(this);
  }

  /**
   * 针对使用原生html元素的插件 需要通过e.target.value获取值
   * @param {Event} e Native event
   */
  handleValueChangeForNE(e) {
    const { onChange } = this.props;
    const value = e.target.value;

    onChange(value);
  }

  handleValueChange(newVal) {
    const { onChange, value } = this.props;
    const val = this.formatValue(newVal, value);
    
    onChange(val);
  }

  toggleFooterDisable(disable) {
    const { toggleFooterDisable } = this.props;
    toggleFooterDisable(disable);
  }

  _renderContent(data, value, isMobile) {
    const { viewType } = this.props;
    const isReadonly = READONLY === viewType;

    if (isReadonly) {
      return (
          <div className='wea-edc-com-readonly'>
            {this.renderForReadonly(...arguments)}
          </div>
      );
    }

    if (this.renderContent) {
      return this.renderContent(...arguments);
    }

    switch (viewType) {
      case MOBILE:
      case MOBILE_WX:
        return this.renderForMobile(...arguments);
      default:
        return this.renderForPC(...arguments);
    }
  }

  renderForPC() { return null; }
  renderForMobile() { return null; }
  renderForReadonly(data, value) {
    value = _.isString(value) ? value : '';

    return <div>{value}</div>;
  }

  formatValue(val) { return val; }

  render() {
    const { type, data, value, viewType = PC } = this.props;
    const { title, subTitle, desc, required } = data;

    const divider = type.toLowerCase() == 'description' && data.divider && data.divider == 1;
    return (
      <Consumer>
        {({field}) => (

          <div className={`wea-edc-form-${type.toLowerCase()}`} style={divider ? {paddingTop: '10px', paddingBottom: field.space} :{paddingBottom: field.space}}>
            {
              divider ?
                <div style={{borderTop: '1px dashed #aab2bd', marginBottom: '10px'}}/>
                :
                null
            }

            <label className='wea-edc-com-title' style={field.css}>
              <span className={required === '1' && 'wea-edc-com-required'}>
                {title}
                {!subTitle ? null : <span className='wea-edc-com-subTitle'>{`(${subTitle})`}</span>}
              </span>
            </label>
            {(viewType === READONLY || !desc) ? null : <label className='wea-edc-com-desc' dangerouslySetInnerHTML={{__html: desc}} />}
            {this._renderContent(data, value, [MOBILE_WX, MOBILE].includes(viewType))}
          </div>
        )}
      </Consumer>
    );
  }
}

View.defaultProps = {
  onChange: () => { },
  viewType: PC
};